<template>
	<view class="body" :style="{'height':screenHeight}">
		<u-navbar :title=title style="color: #3e4d65;" :bgColor="bgColor" placeholder leftIconSize="0"></u-navbar>
		<!-- 主体内容-->
		<view v-for="func in ablist">
			<u--text :text="func.title" align="center" size="16" margin="20rpx"></u--text>
			<view class="body-item bflex" v-for="(item,index) in func.list" :key="index">
				<u-icon :name="item.icon" size="40" color="#2b85e4"></u-icon>
				<view class="item-div" @click="itemChange(item.change)">
					<view class="div-title bflex">
						<u--text :text="item.title" bold></u--text>
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
					<view class="div-content">{{item.content}}</view>
				</view>
			</view>
		</view>

		<!-- 新增聊天 -->
		<u-popup :show="addChatShow" :round="10" mode="center" @close="addChatShow = false">
			<view class="pop-body">
				<u--form labelPosition="left" :model="newChatSession" :rules="addrule" ref="chatRef">
					<u-form-item label="标题" prop="title" :borderBottom="false">
						<u--input placeholder="请输入标题" border="surround" v-model="newChatSession.title"
							clearable></u--input>
					</u-form-item>
				</u--form>
				<view class="pop-button">
					<u-button type="error" text="取消" @click="addChatShow = false"></u-button>
					<u-button type="primary" text="确认" @click="submit"></u-button>
				</view>
			</view>
		</u-popup>

		<!-- 更多内容 -->
		<view class="more" v-for="item in morelist">
			<view class="bflex more-body">
				<u-icon :name="item.icon" size="20" color="#2b85e4"></u-icon>
				<u--text :text="item.text" align="center"></u--text>
			</view>
		</view>
		<c-tabbar></c-tabbar>
	</view>
</template>

<script>
	import api from './api.js'
	export default {
		data() {
			return {
				screenHeight: (this.$store.height - 100) + "rpx",
				title: "首页",
				bgColor: "#fff",
				addChatShow: false,
				newChatSession: {
					title: "New Chat"
				},
				ablist: [{
					title: "智能问答",
					list: [{
						icon: "chat",
						title: "Chat GPT",
						content: "ChatGPT是由OpenAI开发的一种大型语言模型，采用GPT-3.5架构，能够回答各种各样的问题，为用户提供更为个性化和灵活的服务。",
						change: "chatChange"
					}, {
						icon: "order",
						title: "我的提示",
						content: "ChatGPT 的提示功能可以帮助用户更快地找到答案，提高交流效率。ChatGPT的提示功能是一个非常实用的工具，可以为用户提供更为智能化和个性化的服务。",
						change: "orderChange"
					}]
				}, {
					title: "更多应用",
					list: [{
						icon: "google",
						title: "TC 翻译",
						content: "TC 翻译支持超过60种语言的翻译。快速、准确的翻译效果和便捷的使用体验，可以满足用户在工作、学习、旅游等方面的翻译需求。",
						change: "fanyiChange"
					}]
				}],
				morelist: [{
					icon: "question-circle",
					text: "帮助中心"
				}, {
					icon: "share-square",
					text: "分享应用"
				}],
				addrule: {
					"title": {
						required: true,
						message: '请填写标题',
						trigger: ['blur', 'change']
					}
				}

			};
		},
		onLoad() {},
		methods: {
			itemChange(item) {
				if (item == "chatChange") {
					this.addChatShow = true
				}
			},
			async submit() {
				this.$refs.uForm.validate().then(res => {
					this.addNewSession()
				}).catch(errors => {})


			},
			async addNewSession(){
				var res = await api.AddNewSession(this.newChatSession)
				if (res.successed) {
					uni.switchTab({
						url: '/pages/chat/chat'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.body {
		height: 100%;

		.bflex {
			display: flex;
			justify-content: space-between;
		}

		.body-item {

			width: 75%;
			margin: 20rpx auto;
			background-color: #f8f8f8;
			border-radius: 5px;

			.item-div {
				padding: 20rpx;
				padding-left: 0;

				.div-title {
					display: flex;
				}

				.div-content {
					margin-top: 10rpx;
					font-size: 12px;
					color: #888;
				}
			}

		}

		.pop-body {
			width: 600rpx;
			height: 250rpx;
			padding: 30rpx;

			.pop-button {
				width: 80%;
				display: flex;
				justify-content: space-between;
				margin: 70rpx auto;
				bottom: 30rpx;

				.u-button {
					width: 200rpx;
					height: 60rpx;
				}
			}
		}

		.more {
			width: 75%;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 5px;
			margin: 30rpx auto;
			background-color: #f8f8f8;

			.more-body {
				width: 200rpx;
				margin: auto;
			}
		}
	}
</style>